<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		/*有id属性*/
		p[id] {
			background: red;
		}
		
		/*id=green*/
		p[id=green] {
			background: green;
		}

		/*属性包含某个单词*/
		p[class~=yellow] {
			background: yellow;
		}

		/*连字符开头匹配*/
		p[class|=ab] {
			background: orange;
		}

		/*以xxx开头*/
		a[href^=http] {
			color: red;
		}

		/*以xxx结尾*/
		a[href$=html] {
			color: gray;
		}

		/*包含xxx*/
		a[href*=china] {
			color: pink;
		}

		/*根据url的后缀显示不同的图标*/
		a[href$=xls]:after {
			content:url(images/excel.jpg);
			position: relative;
			top:5px;
		}

		a[href$=rar]:after {
			content:url(images/rar.jpg);
			position: relative;
			top:5px;
		}

		a[href$=ppt]:after {
			content:url(images/ppt.jpg);
			position: relative;
			top:5px;
		}

		a[href$=mp4]:after {
			content:url(images/qvod.jpg);
			position: relative;
			top:5px;
		}

		a[href$=txt]:after {
			content:url(images/txt.jpg);
			position: relative;
			top:5px;
		}

		a[href$=html]:after {
			content:url(images/web.jpg);
			position: relative;
			top:5px;
		}

		a[href$=doc]:after {
			content:url(images/word.jpg);
			position: relative;
			top:5px;
		}
	</style>
</head>
<body>
	<p>绿色</p>
	<p id="red">红色</p>
	<p id="green">绿色绿色</p>
	<p class="i like yellow too much">最喜欢的是黄色</p>
	<p class="ab-cde-fg">连字符匹配</p>

	<hr>

	<a href="http://www.baidu.com">百度一下</a>
	<a href="index.html">返回首页</a>
	<a href="http://www.chinasofti.com">中软国际</a>

	<br>
	<br>
	<a href="xxx.xls">excel文件</a>
	<a href="xxx.rar">压缩文件</a>
	<a href="xxx.ppt">幻灯片</a>
	<a href="xxx.mp4">视频文件</a>
	<a href="xxx.txt">文本文件</a>
	<a href="xxx.html">网页文件</a>
	<a href="xxx.doc">word文件</a>
</body>
</html>